<template>
  <div class="indexHead-container">
    <div class="team">
      <router-link to="jointeam">
        <div class="no-team" v-show="!teamed">
          <span>加入小队/创建小队</span>
        </div>
      </router-link>
      <div class="have-team" v-show="teamed">
        <div class="userPic teamLeader">
          <img src="../../assets/headPic.png" alt="头像" width="100%">
        </div>
        <div class="userPic">
          <img src="../../assets/headPic.png" alt="头像" width="100%">
        </div>
        <div class="userPic">
          <img src="../../assets/headPic.png" alt="头像" width="100%">
        </div>
        <div class="userPic">
          <img src="../../assets/headPic.png" alt="头像" width="100%">
        </div>
        <div class="userPic">
          <img src="../../assets/headPic.png" alt="头像" width="100%">
        </div>
      </div>
    </div>
    <div class="logo">
      <img src="../../assets/logo-temp.png" alt="logo" height="100%">
    </div>
    <div class="user">
      <div class="before-login">
        <router-link to="aboutus">
          <div class="aboutUs userFrame">
            <span>关于我们</span>
          </div>
        </router-link>
        <router-link to="blogs">
          <div class="blog userFrame">
            <span>BLOG</span>
          </div>
        </router-link>
        <div class="login-btn userFrame" v-show="!logined">
          <router-link to="/login">
            <span>登录/注册</span>
          </router-link>
        </div>
        <div class="after-login" v-show="logined">
          <div class="head">
            <img src="../../assets/headPic.png" alt="头像" height="100%">
          </div>
          <div class="userName">
            <span>{{ acount }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index_Head',
  data () {
    return {
      logined: false,
      teamed: false
    }
  },
  props: {
    acount: {
      default: '',
      type: String
    },
    password: {
      default: '',
      type: String
    },
    teamName: {
      default: '',
      type: String
    }
  },
  watch: {
    acount (val) {
      if (val === '') {
        this.logined = false
      } else {
        this.logined = true
      }
    },
    teamName (val) {
      if (val === '') {
        this.teamed = false
      } else {
        this.teamed = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.indexHead-container {
  width: 100%;
  height: 88px;
  display: flex;
  justify-content: space-between;
}

.team {
  width: 725px;
  height: 88px;
  background-color: #6eb7f3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 89px;
  height: 88px;
  background-color: #000;
}

.user {
  width: 725px;
  height: 88px;
  background-color: #f6815b;
}

.no-team {
  width: 564px;
  height: 73px;
  background-color: #c2def0;
  border-radius: 8px;
  transition: all .3s;
  cursor: pointer;
}

.no-team span {
  display: block;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  transition: all .3s;
  margin: 4px 0;
}

.no-team:hover {
  background-color: #77c0ee;
}

.no-team:hover span {
  color: #ffffff;
}

.no-team:active {
  background-color: #5f9abe;
}

.no-team:active span {
  color: #dadada;
}

.before-login {
  width: 96%;
  height: 88px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.userFrame {
  width: 140px;
  height: 63px;
  background-color: #fff;
  opacity: .9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;

  span {
    transition: all .3s;
    display: block;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
  }

  &:hover {
    background-color: #eaeaea;
  }

  &:active {
    background-color: #dadada;
  }
}

.userFrame:active {
}

.login-btn {
  background-color: #aea3a3;
  //display: none;
}

.after-login {
  display: flex;
  width: 150px;
  height: 63px;
  background-color: #aea3a3;
}

.head {
  height: 63px;
  width: 63px;
  cursor: pointer;
}

.userName {
  padding-left: 10px;
  line-height: 63px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.have-team {
  width: 564px;
  height: 73px;
  background-color: #c2def0;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  .userPic{
    .teamPeople(60px,63px,5px);
  }
  .teamLeader {
    .teamPeople(73px,70px,1px)
  }
  .teamPeople(@w,@h,@m) {
  height: @h;
  width: @w;
  background-color: #c2def0;
  border-radius: 8px;
    margin: @m 0;
}
}
</style>
